import React from 'react';
import { Button } from '@teamix/ui';
import PropTypes from 'prop-types';
import utils from 'utils';
import { CSSTransition } from 'react-transition-group';
import './index.scss';
import intl from '../../locale';

const prefix = 'guide-card';

export default class GuideCard extends React.Component {
  static propTypes = {
    img: PropTypes.string,
    header: PropTypes.string,
    description: PropTypes.string,
    onClickKnown: PropTypes.func,
    visible: PropTypes.bool,
    footer: PropTypes.element,
    arrow: PropTypes.string,
    className: PropTypes.string,
    style: PropTypes.object,
    imgPosition: PropTypes.string,
  };

  static defaultProps = {
    img: '',
    header: 'Header',
    description: 'Description',
    onClickKnown: () => {},
    visible: false,
    footer: null,
    arrow: 'top',
    className: null,
    style: {},
    imgPosition: 'center',
  };

  componentDidMount() {
    const isStickcache = utils.getCachedData('isSidebarStick');
    const guide = document.querySelector('.org-alias_guide');
    if (guide) {
      if (isStickcache === 'false' || isStickcache === false) {
        guide.style.left = '92px';
      } else {
        guide.style.left = '267px';
      }
    }
  }

  // getIfRdcInviteShow = () => {
  //   getIntroPointState('rdc_invite_organization_member')
  //     .then((result) => {
  //       if (result.state) {
  //         this.setState({
  //           visible: true,
  //         });
  //       }
  //     })
  //     .catch((err) => {
  //       console.error(err);
  //     });
  // };

  // setIfDialogShow = () => {
  //   this.setState({
  //     visible: false,
  //   });
  //   setIntroPointState('rdc_invite_organization_member')
  //     .then(() => {})
  //     .catch((err) => {
  //       console.error(err);
  //     });
  // };

  onKnownBtnClick = () => {
    this.props.onClickKnown();
  };

  render() {
    const { visible, img, header, description, footer, arrow, className, style, imgPosition } =
      this.props;

    return (
      <CSSTransition in={visible} timeout={500} classNames="guide" unmountOnExit>
        <div className={className} style={style}>
          <div className={`${prefix}`}>
            <div className={`${prefix}-arrow arrow-${arrow}`} />
            {imgPosition === 'center' ? (
              <div>
                <div className={`${prefix}-header`}>{header}</div>
                <div className={`${prefix}-description`}>{description}</div>
                <div className={`${prefix}-container`}>
                  <img className={`${prefix}-container-image`} src={img} />
                </div>
              </div>
            ) : (
              <div>
                <div className={`${prefix}-img-container`}>
                  <img className={`${prefix}-img`} src={img} />
                </div>
                <div className={`${prefix}-header`}>{header}</div>
                <div className={`${prefix}-description`}>{description}</div>
              </div>
            )}

            <div className={`${prefix}-btn-container`}>
              <Button className={`${prefix}-btn-known`} onClick={this.onKnownBtnClick}>
                {intl.get({
                  id: 'code-assets.components.guideCard.ISee',
                  defaultMessage: '我知道了',
                })}
              </Button>
            </div>
            {footer && <div className={`${prefix}-footer`}>{footer}</div>}
          </div>
        </div>
      </CSSTransition>
    );
  }
}
